<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>空调开关示例</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            height: 100vh;  
            background-color: #f0f0f0;  
        }  
        #toggleButton {  
            padding: 10px 20px;  
            font-size: 18px;  
            cursor: pointer;  
            border: none;  
            border-radius: 5px;  
        }  
        #toggleButton2 {  
            padding: 10px 20px;  
            font-size: 18px;  
            cursor: pointer;  
            border: none;  
            border-radius: 5px;  
        }
        #status {  
            margin-top: 20px;  
            font-size: 24px;  
            color: #333;  
        }  
        #status2{  
            margin-top: 20px;  
            font-size: 24px;  
            color: #333;  
        }
    </style>  
</head>  
<body>  

    <h1>空调控制</h1>  
    <button id="toggleButton" class="container">开空调</button>  
    <div id="status">状态: 关</div>  
    <script src="script1.js" >
    </script>  
    <h1>空</h1>  
        <button id="toggleButton2" alt="空" >开空调</button>  
        <div id="status2">状态: 关</div>  
    <script src="script1.js" >
    </script>  
        

</body>  
</html>